<template>
  <el-card>
    <el-row>
      <el-col :span="12" v-for="(item, index) in this.currentOption" :key="index">
        <Gauge :index="index" :item="item"></Gauge>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Gauge from './Gauge'

  export default {
    data() {
      return {
        areaFactor: {},
        currentOption: []
      }
    },
    // 当GaugePanel作为BigScreen的子组件时
    props: {
      areaName: ''
    },
    components: {
      Gauge
    },
    computed: {
      ...mapGetters(['getSewageSystem'])
    },
    methods: {
      getAreaFactor(area) {
        // 将当前的数据清零，但是为什么这句放在此处和放在下面所显示的效果完全不同
        this.currentOption = [];
        this.$http.get('/properites/factor?area=' + area).then(response => {
          // 从数据库中获取到当前服务区的指标数据之后，判断其中含有哪些指标，如ph, cod等
          this.areaFactor = response.data;
          // 遍历仪表盘的公共数据部分
          for(let i = 0; i < this.getSewageSystem.factorVos.length; i++) {
          // 如果当前所返回的指标中包含公共数据的指标，则将公共数据与当前数据作为一整option整体添加到currentOPtion数组中
            let temp = this.getSewageSystem.factorVos[i];
            if(this.areaFactor.hasOwnProperty(temp['name'])) {
              temp['value'] = this.areaFactor[temp['name']]['value'];
              this.currentOption.push(temp)
            }
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    mounted() {

    },
    watch: {
      // 每当修改服务区名称时，重新绘制仪表盘
      areaName(newArea) {
        this.getAreaFactor(newArea);
      }
    }
  }
</script>

<style>

</style>
